<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器_语言伪类</title>
    <style>
        div::first-letter {
            color: red;
            font-size: 40px;
        }

        div::first-line {
            background-color: yellow;
        }

        div::selection {
            background-color: green;
            color: orange;
        }

        input::placeholder {
            color: skyblue;
        }

        p::before {
            content: "￥";
        }

        P::after {
            content: ".00";
        }
    </style>
</head>

<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores tempore et recusandae odit! Molestiae
        perferendis quod eum accusamus omnis, porro error commodi dolorem alias accusantium reiciendis voluptatum odio
        dolor vel illo animi iure modi nemo expedita, necessitatibus numquam. Beatae deleniti, voluptatem reprehenderit
        dicta perferendis quos sit ducimus quis fugiat nihil explicabo aliquam magnam minus velit doloremque ipsa itaque
        cum esse?</div>

    <input type="text" placeholder="请输入您的用户名">

    <p>199</p>
    <p>299</p>
    <p>399</p>
    <p>499</p>
</body>

</html>